<template>
  <div class="queryPage">
    <div class="query" v-drag="['.query', '#app']">
      <div class="head">
        <span class="title">通用查询</span>
        <span class="close" @click="close">×</span>
      </div>
      <el-tabs v-model="activeName" class="tabsClass" @tab-click="handleClick">
        <el-tab-pane label="属性查询" name="first">
          <el-form ref="form" label-width="120px">
            业务图层
            <el-select
              v-model="typeName"
              placeholder="请选择"
              style="width: 100%; margin-top: 10px"
              @change="handleCheckChange"
            >
              <el-option
                v-for="item of lyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.typeName"
              />
            </el-select>
            <div style="margin-top: 15px; font-size: 20px; display: flex; align-items: center">
              <el-radio-group v-model="radio" size="small">
                <el-radio-button label="AND" value="AND"></el-radio-button>
                <el-radio-button label="OR" value="OR"></el-radio-button>
              </el-radio-group>
              <el-icon
                style="font-size: 20px; cursor: pointer; margin: 0 10px; position: relative; top: 3px"
                @click="addDomain"
              >
                <CirclePlus />
              </el-icon>
              <div class="btn" style="display: flex">
                <div class="btnClass" style="margin-right: 10px" @click="queryBtn">查询</div>
                <div class="btnClass" @click="ResetBtn()">重置</div>
              </div>
            </div>

            <div class="splitLeft">
              <span style="width: 125px">查询字段</span>
              <span style="width: 90px">查询符号</span>
              <span>属性值</span>
            </div>
          </el-form>

          <el-form ref="formRef" :model="dynamicValidateForm" class="demo-dynamic">
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :key="domain.key"
              :prop="'domains.' + index + '.value'"
            >
              <el-select
                v-model="domain.queryfield"
                placeholder="请选择"
                style="margin-right: 5px; width: 105px"
              >
                <el-option
                  v-for="item in domain.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

              <el-select
                v-model="domain.queryValue"
                placeholder="请选择"
                style="margin-right: 5px; width: 90px"
              >
                <el-option
                  v-for="item in domain.queryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

              <el-input
                v-model="domain.value"
                placeholder="请输入"
                style="margin-right: 5px; width: 75px"
              />
              <el-icon
                style="font-size: 20px; cursor: pointer"
                @click.prevent="removeDomain(domain)"
              >
                <CircleClose />
              </el-icon>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="空间查询" name="second">
          <el-form ref="form1" label-width="120px">
            <div class="q-gutter-md row items-start" style="display: block">
              <p class="title">绘制选择</p>
              <div class="btnClass" @click="doDraw">面</div>
              <div class="btnClass" @click="clearDraw">清除</div>
              <input @change="onShapeChange" id="shp1" class="shapeInput" type="file" accept=".shp" />
            </div>
            <!-- <div class="btnClass" @click="ResetBtn()">重置</div> -->
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 属性空间查询表格 -->
    <div v-if="showTableData" v-drag="['.property', '#app']" class="property">
      <div class="title head">
        <span style="margin-left: 20px">查询表</span>
        <span style="cursor: pointer; position: absolute; right: 20px" @click="closeTable">x</span>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        style="width: 100%"
        highlight-current-row
        element-loading-text="正在查询中。。。"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        @row-dblclick="handleRowDblClick"
      >
       <template v-if="typeName.includes('dz84')">
        <el-table-column prop="OBJECTID" label="OBJECTID">
          <template #default="scope">
            <span :title="scope.row.OBJECTID">{{ scope.row.OBJECTID }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CHFCAC" label="CHFCAC">
          <template #default="scope">
            <span :title="scope.row.CHFCAC">{{ scope.row.CHFCAC }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="DCDH" width="110" label="DCDH">
          <template #default="scope">
            <span :title="scope.row.DCDH">{{ scope.row.DCDH }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="MC" label="MC">
          <template #default="scope">
            <span :title="scope.row.MC">{{ scope.row.MC }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面积">
          <template #default="scope">
             <span >{{ parseFloat(scope.row.Shape_Area)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop label="定位">
          <template #default="scope">
            <span style="cursor: pointer">
              <el-icon @click="featuresQuery(scope.row, 1)">
                <LocationInformation />
              </el-icon>
            </span>
          </template>
        </el-table-column>
      </template>

      <template v-if="typeName.includes('syd84')">
        <el-table-column prop="OBJECTID" label="OBJECTID">
          <template #default="scope">
            <span :title="scope.row.OBJECTID">{{ scope.row.OBJECTID }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CHFCAC" label="CHFCAC">
          <template #default="scope">
            <span :title="scope.row.CHFCAC">{{ scope.row.CHFCAC }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SYDLX" width="110" label="SYDLX">
          <template #default="scope">
            <span :title="scope.row.SYDLX">{{ scope.row.SYDLX }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SYDWZ" label="SYDWZ">
          <template #default="scope">
            <span :title="scope.row.SYDWZ">{{ scope.row.SYDWZ }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="GZLB" label="GZLB">
          <template #default="scope">
            <span :title="scope.row.GZLB">{{ scope.row.GZLB }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="KCL" label="KCL">
          <template #default="scope">
            <span :title="scope.row.KCL">{{ scope.row.KCL }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop label="定位">
          <template #default="scope">
            <span style="cursor: pointer">
              <el-icon @click="featuresQuery(scope.row, 1)">
                <LocationInformation />
              </el-icon>
            </span>
          </template>
        </el-table-column>
      </template>

      </el-table>
      <el-pagination
        class="msg-pagination-container"
        small
        :total="tableData.length"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :hide-on-single-page="false"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted, inject, ref, reactive, toRaw,defineEmits,getCurrentInstance } from "vue";

import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import {
  CirclePlus,
  CircleClose,
  LocationInformation
} from "@element-plus/icons-vue";
import axios from "axios";
import DrawTools from "@/utils/drawTools";

const instance = getCurrentInstance();
const EventBus = instance.appContext.config.globalProperties.EventBus;

const emit = defineEmits(['close']);
let drawTools =null;
let handler = null;
let polygonEntity = null;
const activeName = ref("first");
const radio = ref("AND");
const lyOptions = ref([
  { id: 1, name: "地质", typeName: "myGeoserver:dz84" },
  { id: 2, name: "水源地", typeName: "myGeoserver:syd84" },
]);
const typeName = ref("");

const queryFiles = ref("");
const tableData = ref([]);
const loading = ref(true);
const showTableData = ref(false);
const pageSize = ref(4);
const currentPage = ref(1);
const properties = ref([])
const data = ref(null);
const form = ref({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});

let queryOpts = [
  { value: "LIKE", label: "LIKE" },
  { value: "=", label: "=" },
  { value: ">", label: ">" },
  { value: "<", label: "<" },
  { value: ">=", label: ">=" },
  { value: "<=", label: "<=" }
];
const dynamicValidateForm = ref({
  domains: [
    {
      queryfield: "",
      key: 1,
      value: "",
      options: [],
      queryOptions: queryOpts,
      queryValue: "LIKE"
    }
  ]
});
onMounted(() => {
   EventBus.on("cesium-command", useCommand);
})

const removeDomain = item => {
  if (dynamicValidateForm.value.domains.length === 1) {
    ElMessage({
      showClose: true,
      message: "至少一条查询条件",
      type: "warning"
    });
    return;
  }
  const index = dynamicValidateForm.value.domains.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.value.domains.splice(index, 1);
  }
};
const addDomain = () => {
  dynamicValidateForm.value.domains.push({
    value: "",
    key: Date.now(),
    queryfield: "",
    options: dynamicValidateForm.value.domains[0].options,
    queryOptions: queryOpts,
    queryValue: "LIKE"
  });
};

const handleCheckChange = async () => {
  showTableData.value = false
  for (
    let index = 0;
    index < dynamicValidateForm.value.domains.length;
    index++
  ) {
    dynamicValidateForm.value.domains[index].options = [];
  }
  // values.value = val;
  // console.log("url:", values.value);
 const wfsUrl = "/geoserver/myGeoserver/wms";
  const params = {
    service: "WFS",
    version: "1.1.0",
    request: "DescribeFeatureType",
    typeName: typeName.value,
    outputFormat: "application/json"
  };

  try {
    const response = await axios.get(wfsUrl, { params });
    const featureType = response.data.featureTypes[0];
    properties.value = featureType.properties
    if (featureType && featureType.properties) {
      const fields = featureType.properties.map(prop => ({
        label: prop.name,
        value: prop.name // 或者 prop.type，取决于 GeoServer 版本和配置
      }));
      console.log("图层字段列表:", fields);
      for (
        let index = 0;
        index < dynamicValidateForm.value.domains.length;
        index++
      ) {
        dynamicValidateForm.value.domains[index].options.push(...fields);
      }
    }
  } catch (error) {
    console.error("获取图层字段失败:", error);
  }
};

const queryBtn = () => {
  ResetBtn();
  queryFiles.value = "";
  for (
    let index = 0;
    index < dynamicValidateForm.value.domains.length;
    index++
  ) {
    const element = dynamicValidateForm.value.domains[index];
    if (element.queryValue === "LIKE") {
      let query = ` ${element.queryfield} like '%${element.value}%'`;
      queryFiles.value = " " + queryFiles.value + query + " " + radio.value;
    } else {
      let query = ` ${element.queryfield} ${element.queryValue} '${element.value}'`;
      queryFiles.value = queryFiles.value + query + " " + radio.value;
    }
  }
  if (radio.value === "AND") {
    queryFiles.value = queryFiles.value.substr(
      0,
      queryFiles.value.lastIndexOf("AND")
    );
  } else {
    queryFiles.value = queryFiles.value.substr(
      0,
      queryFiles.value.lastIndexOf("OR")
    );
  }
  queryCQL(queryFiles.value);
  console.log("queryFiles.value:",queryFiles.value);
  
};
const queryCQL = async cql_filter => {
  const wfsUrl = "geoserver/myGeoserver/ows";
  const params = { 
    service: "WFS",
    version: "1.0.0",
    request: "GetFeature",
    typeName: typeName.value,
    outputFormat: "application/json",
    srsName: "urn:ogc:def:crs:EPSG::4326",
    cql_filter
  };
  try {
    const result = await axios.get(wfsUrl, { params });
    console.log("CQL_RESPONSE:", result);
    showTableData.value = true;
    clearParent("hightLight");
    if (result.data.features.length == 0) {
      ElMessage({
        showClose: true,
        message: "未查询到数据",
        type: "warning"
      });
      showTableData.value = false;
      return;
    }
    for (let index = 0; index < result.data.features.length; index++) {
      let element = result.data.features[index];
      let properties = element.properties;
      properties.geometry = element.geometry;
      tableData.value.push(properties);
    }
    console.log("tableData", tableData);
    if (tableData.value.length > 0) {
      loading.value = false;
    }
  } catch (error) {
    console.error("请求失败:", error);
    alert("查询失败，请检查控制台日志！");
    showTableData.value = false;
  }
};
const handleCurrentChange = (_currentPage: any) => {
  currentPage.value = _currentPage;
};
const closeTable = () => {
  showTableData.value = false;
  clearParent("hightLight");
};
const close= () => {
  clearDraw()
  emit("close")
};
const getPolygonCenter = pos => {
  let x = 0.0;
  let y = 0.0;
  for (let i = 0; i < pos.length; i++) {
    x = x + parseFloat(pos[i][0]);
    y = y + parseFloat(pos[i][1]);
  }
  x = x / pos.length;
  y = y / pos.length;
  return { lng: x, lat: y };
};
//清除场景小图标
const clearParent = (parentID: any) => {
  let parent = viewer.entities.getById(parentID);
  if (!parent || !parent._children) {
    return;
  }
  if (parent._children.length !== 0) {
    let children = parent._children;
    children.forEach(item => {
      viewer.entities.remove(item);
    });
  }
};
const handleRowDblClick = row => {
  featuresQuery(row, 1);
};
//属性查询点击图层查看
const featuresQuery = (item: any, id: any) => {
  item = toRaw(item);
  clearParent("hightLight");
  let geometry = item.geometry;
  const polygonType = ['MultiPolygon', 'Polygon'];

  let entity 
  let parent = viewer.entities.getOrCreateEntity("hightLight");
  //判断是面
  if (polygonType.includes(geometry.type) ) {
      let rings = geometry.coordinates[0][0]
      let centerPos = getPolygonCenter(rings);
      let temp = [];
      for (let i = 0; i < rings.length; i++) {
        temp = temp.concat(rings[i]);
      }
 
      entity = viewer.entities.add({
        parent,
        position: Cesium.Cartesian3.fromDegrees(centerPos.lng, centerPos.lat, 120),
        billboard: {
          image: "/img/position.png", //图片存储路径,
          scale: 0.5,
          disableDepthTestDistance: Number.POSITIVE_INFINITY //解决地形遮挡问题
        },
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray(temp),
          ///extrudedHeight: 10,
          // height: 0,
          material: Cesium.Color.RED.withAlpha(0.8),
          outline: true,
          outlineColor: Cesium.Color.GREEN,
          // heightReference: Cesium.HeightReference.NONE,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          // classificationType: Cesium.ClassificationType.TERRAIN,
        }
      });
  }
  if(geometry.type === "Point"){
    let  pos= geometry.coordinates
    entity = viewer.entities.add({
        parent,
        position: Cesium.Cartesian3.fromDegrees(pos[0],pos[1], 120),
        billboard: {
          image: "/img/position.png", //图片存储路径,
          scale: 0.5,
          disableDepthTestDistance: Number.POSITIVE_INFINITY //解决地形遮挡问题
        }
      });
  }
  viewer.flyTo(entity, {
    maximumHeight: 500,
    offset: new Cesium.HeadingPitchRange(0, -90, 1000)
  });
};

//重置按钮
const ResetBtn = () => {
  loading.value = true;
  showTableData.value = false;
  clearParent("hightLight");
  tableData.value = [];
};

const handleClick = (tab, event) => {
  clearDraw();
};
const removeDrawPolygon = () => {
  if (polygonEntity) drawTools.removeAllEntity();
};
const getPolygonCoordinates = polygonEntity => {
  const positions = polygonEntity.polygon.hierarchy.getValue().positions;
  const coordinates = [];
  for (let i = 0; i < positions.length; i++) {
    const cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
    const longitude = Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = Cesium.Math.toDegrees(cartographic.latitude);
    coordinates.push([longitude, latitude]);
  }

  return coordinates;
};
const doDraw = () => {
  clearDraw();
  drawTools= new DrawTools(viewer)
  drawTools.draw("polygon", handler, entity => {
    polygonEntity = entity;
    let coordinates = getPolygonCoordinates(polygonEntity);
    console.log("绘制点坐标：", coordinates);
    queryGeo(coordinates);
  });
};
const clearDraw = () => {
  removeDrawPolygon();
  ResetBtn();
};
const queryGeo = async coordinates => {
  const polygonWKT = `POLYGON((${[
    ...coordinates.map(coord => `${coord[0]} ${coord[1]}`),
    `${coordinates[0][0]} ${coordinates[0][1]}`
  ].join(", ")}))`;
  const cql_filter = `INTERSECTS(the_geom, ${polygonWKT})`;
  queryCQL(cql_filter);
};

const onShapeChange = () => {
  let shpFile = document.getElementById("shp1").files[0];
  let dbfFile = null;
  if (!shpFile) {
    ElMessage({
      message: "请选择shape数据",
      type: "warning"
    });
    return;
  }

  let opts = { shp: shpFile };
  if (dbfFile) {
    opts["dbf"] = dbfFile;
  }
  try {
    const shapefile = new Shapefile(opts, function(data) {
      let pos = data.geojson.features[0].geometry.coordinates[0];
      queryGeo(pos);
      let item = {
        shpFileName: shpFile.name,
        geoJsonData: data.geojson
      };

      let promise = Cesium.GeoJsonDataSource.load(item.geoJsonData, {
        fill: Cesium.Color.BLUE.withAlpha(0.2),
        strokeWidth: 0,
        clampToGround: true
      });
      promise.then(function(dataSource) {
        viewer.dataSources.add(dataSource);
      });
      viewer.flyTo(promise);
      console.log("看是什么数据", item.geoJsonData);
    });
  } catch (err) {
    console.log(err);
  }
};

const useCommand = data => {
  switch (data.command) {
    case "query":
      queryCommand(data)
      break;
  
    default:
      break;
  }  
};
const queryCommand=data=>{
  const requiredFields = ['layer', 'field', 'operator', 'value'];
   const invalidField = requiredFields.find(field =>
    !data.parameters.hasOwnProperty(field) || // 条件1: 字段不存在
    data.parameters[field] === null ||        // 条件2: 值为 null
    data.parameters[field] === ""             // 条件3: 值为空字符串
  );
  if (invalidField) {
    if (!data.parameters.hasOwnProperty(invalidField)) {
      ElMessage.error(`参数错误: 缺少必需的属性 "${invalidField}"`);
    } else {
      ElMessage.error(`参数错误: 属性 "${invalidField}" 的值不能为空或null`);
    }
  }

  let parameters = data.parameters
  const foundOption = lyOptions.value.find(option => option.name.includes(parameters.layer)|| parameters.layer.includes(option.name) );
  if (foundOption) {
    console.log("foundOption:",foundOption);
      typeName.value = foundOption.typeName
      getCommandValid(parameters)
  } else {
    ElMessage({
      message: `未找到名为 "${parameters.layer}" 的图层配置，请检查输入。`,
      type: 'warning',
    });
    return;
  }
    
}

const getCommandValid =async parameters=>{
  let {field,operator,value} = parameters
  const ALLOWED_OPERATORS = ['=', '!=', '<>', '>', '<', '>=', '<=', 'LIKE', 'IN'];
  await handleCheckChange()
  if (!properties.value.find(option => option.name.includes(field))) {
    ElMessage.error(`查询失败：非法的字段名 "${field}"`);
    return null;
  }
  if (!ALLOWED_OPERATORS.includes(operator)) {
    ElMessage.error(`查询失败：非法的操作符 "${operator}"`);
    return null;
  }
  let query 
  if (operator.includes("LIKE")) {
       query = ` ${field} like '%${value}%'`;
    } else {
      query = ` ${field} ${operator} '${value}'`;
    }
  console.log("sql :",query);
  tableData.value=[]
  queryCQL(query)
}
</script>

<style lang="scss" scoped>
.queryPage {
   position: absolute;
       width: 100%;
}
.query {
  position: absolute;
  right: 10px;
  top: 200px;
  padding: 14px 18px;
  width: 352px;
  background-image: url(/img/底框.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  color: white;
  z-index: 1;

  .head {
    height: 24px;
    position: relative;
    top: -4px;

    .title {
      width: 76px;
      height: 25px;
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #ffffff;
      text-shadow: 0px 2px 7px 0px rgba(0, 252, 255, 0.5);
    }

    .close {
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 24px;
      cursor: pointer;
    }
  }

  .tabsClass {
    height: calc(100% - 50px);
    ::v-deep(.el-tabs__item) {
      color: #ffffff !important;
    }
    ::v-deep(.el-checkbox) {
      color: #ffffff !important;
    }
    ::v-deep(.el-input__inner) {
      color: #ffffff !important;
    }
    ::v-deep(.el-radio) {
      color: #ffffff !important;
    }
    .splitLeft {
      // height: 30px;
      width: 100%;
      margin-top: 15px;
      display: flex;
    }
    .splitRight {
      position: relative;
      width: 43%;
      display: inline-block;
      margin-top: 15px;
      margin-left: 5px;
    }

    .bufferDiv {
      -webkit-display: flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;

      .sliderClass {
        width: 70%;
      }

      .inputNumberClass {
        width: 85px;
      }
    }

    ::v-deep .el-tabs__item {
      margin: 0 10px !important;
    }
    .btn {
      float: right;
    }
    .block {
      margin: 15px 0;
      display: flex;
      align-items: center;
      span {
        width: 250px;
      }
    }
    .btnClass {
      margin: 0 auto;
      cursor: pointer;
      border: none;
      background: url(/img/button.png) no-repeat 100%;
      width: 88px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 1px;
      border-radius: 8px;
    }
    .removeLyr {
      position: absolute;
      left: 35%;
      bottom: 30px;
      cursor: pointer;
      border: none;
      background: url(/img/button.png) no-repeat 100%;
      width: 88px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 1px;
      border-radius: 8px;
    }

    .ResetLyr {
      position: absolute;
      left: 35%;
      bottom: 30px;
      cursor: pointer;
      border: none;
      background: url(/img/button.png) no-repeat 100%;
      width: 88px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 1px;
      border-radius: 8px;
    }

    .areaType {
      // border: 1px solid springgreen;
      height: 100%;
      width: 100%;
      .areaTop {
        margin-top: 10px;
      }
    }

    .yearType {
      // border: 1px solid springgreen;
      height: 260px;
      width: 100%;
      margin-top: 6%;
    }

    .clickClass {
      background: linear-gradient(
        90deg,
        rgba(80, 224, 255, 0.1),
        rgba(80, 224, 255, 0.3) 100%,
        rgba(80, 224, 255, 0.1) 100%
      );
      border: 1px solid;
      color: #50e0ff;
      border-radius: 4px;
    }

    .areaspan {
      width: 30%;
      height: 30px;
      border: 1px solid #97a0a1;
      border-radius: 4px;
      float: left;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: CENTER;
      line-height: 28px;
      margin-top: 5%;
      cursor: pointer;
      .shapeInput {
        width: 100%;
        position: relative;
        left: 15px;
        height: 100%;
        top: -27px;
        opacity: 0;
      }
    }
    .line {
      margin-left: 5%;
    }

    .areaspan:hover {
      background: linear-gradient(
        90deg,
        rgba(80, 224, 255, 0.1),
        rgba(80, 224, 255, 0.3) 100%,
        rgba(80, 224, 255, 0.1) 100%
      );
      border: 1px solid;
      //border-image: linear-gradient(90deg, #0bb9f5, #0bb9f5 100%, #0bb9f5 100%) 1 1;
      color: #50e0ff;
      border-radius: 4px;
    }

    ::v-deep(.el-input__inner) {
      background-color: transparent;
    }

    ::v-deep(.el-tabs__content) {
      height: 100%;
      margin-top: 20px;
    }
  }
}

.shapeDiv {
  width: 200px;
  margin: 20px auto;
  height: 96px;
  background: rgba(35, 134, 164, 0.3);
  border: 1px solid rgba(14, 199, 237, 0.5);
  border-radius: 4px;
  border-radius: 4px;
  // margin: 20px;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  line-height: 24px;
  padding-top: 14px;

  .shapeInput {
    width: 100%;
    position: relative;
    left: 0px;
    height: 100%;
    top: -80px;
    opacity: 0;
  }
}
.el-radio-button,
.el-radio-group {
  display: inline;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  color: #fff;
}
.el-icon-circle-plus-outline:hover,
.el-icon-circle-close:hover {
  color: rgba(255, 255, 255, 0.6);
}
::v-deep .el-form-item__content {
  display: flex;
}
::v-deep .el-form-item {
  margin-top: 5px;
  margin-bottom: 0;
}
.el-icon-circle-close:before {
  position: relative;
  top: 10px;
}
.property {
  width: 100% ;
  height: 300px;
  top: 565px;
  position: absolute;
  // left: 350px;
  // bottom: 35px;
  background-color: rgb(13, 53, 57);
  z-index: 999;
  ::v-deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    cursor: pointer;
  }
  .title {
    font-size: 22px;
    color: #fff;
    padding: 6px 0;
    background-color: rgb(3, 84, 90);
  }
}
::v-deep .el-table tr {
  color: white;
}
::v-deep .el-table {
  color: white;
  --el-table-row-hover-background-color: #063f8d87 !important;
  --el-table-current-row-background-color: #063f8d57;
  --el-table-border-color: #97a0a1;
}

::v-deep .el-table__body-wrapper {
  height: 200px;
}
.el-input-number--small {
  width: 77%;
}
.el-icon-location-information:hover {
  color: #1989fa;
}
::v-deep .el-table__row .cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .msg-pagination-container {
  float: right;
  margin-top: 20px;
  .btn-prev {
    background-color: transparent !important;
    color: white !important;
  }
  .btn-next {
    background-color: transparent !important;
    color: white !important;
  }
}
::v-deep .el-pagination__total {
  color: white !important;
}
::v-deep .el-pager {
  li {
    background-color: transparent !important;
    color: white !important;
  }
}

::v-deep .el-pager {
  li:not(.disabled):hover {
    color: #4a82ff !important;
  }
  li:not(.disabled):active {
    color: #4a82ff;
  }
}
::v-deep .el-pagination__jump {
  color: #fff;
}
::v-deep .el-input__wrapper {
  background-color: transparent;
}
::v-deep .el-table .el-table__cell {
  background-color: rgb(13, 53, 57);
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(25, 98, 150);
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgb(25, 98, 150);
}

.q-gutter-x-md > *,
.q-gutter-md > * {
  margin-left: 6px;
}
.bussinessAnysis {
  position: absolute;
  right: 70px;
  top: 15%;
  height: 280px;
  padding: 24px;
  width: 272px;
  // background-image: url(/static/img/toolLeft/底框.png);
  background-color: rgba(6, 63, 141, 1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  color: white;
  z-index: 1;

  .head {
    height: 22px;
    position: relative;
    top: -10px;

    .title {
      width: 76px;
      height: 25px;
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #ffffff;
      text-shadow: 0px 2px 7px 0px rgba(0, 252, 255, 0.5);
    }

    .close {
      position: absolute;
      top: -15px;
      right: -8px;
      font-size: 24px;
      cursor: pointer;
    }
  }

  .bussinessAnysisPannel {
    :deep(.vc-drawings-container) {
      margin: 2px !important;
      position: unset;
    }
    // padding: 10px;
    .block {
      margin-top: 20px;
      display: flex;
      align-items: center;
      span {
        width: 100px;
      }
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #ffffff;
      line-height: 22px;
    }

    .drawType {
    }
    .areaType1 {
      margin-top: 20px;
    }
    .areaType {
      // border: 1px solid springgreen;
      height: 140px;
      width: 100%;
      margin-top: 15px;
      .areaTop {
        margin-top: 15px;
      }
    }

    .yearType {
      // border: 1px solid springgreen;
      height: 190px;
      width: 100%;
      margin-top: 6%;
    }

    .areaspan {
      width: 30%;
      height: 30px;
      border: 1px solid #97a0a1;
      border-radius: 4px;
      float: left;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: CENTER;
      line-height: 28px;
      margin-top: 5%;
      cursor: pointer;
      .shapeInput {
        width: 100%;
        position: relative;
        left: 15px;
        height: 100%;
        top: -27px;
        opacity: 0;
      }
    }

    .line {
      margin-left: 5%;
    }

    .areaspan:hover {
      background: linear-gradient(
        90deg,
        rgba(80, 224, 255, 0.1),
        rgba(80, 224, 255, 0.3) 100%,
        rgba(80, 224, 255, 0.1) 100%
      );
      border: 1px solid;
      //border-image: linear-gradient(90deg, #0bb9f5, #0bb9f5 100%, #0bb9f5 100%) 1 1;
      color: #50e0ff;
      border-radius: 4px;
    }

    .clickClass {
      background: linear-gradient(
        90deg,
        rgba(80, 224, 255, 0.1),
        rgba(80, 224, 255, 0.3) 100%,
        rgba(80, 224, 255, 0.1) 100%
      );
      border: 1px solid;
      color: #50e0ff;
      border-radius: 4px;
    }

    .hcjl {
      width: 56px;
      height: 22px;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #ffffff;
      line-height: 22px;
    }

    .el-input-number--small {
      margin-left: 5%;
      color: #222020;
    }
    :deep(.el-input__inner) {
      color: #222020;
    }

    .el-button {
      width: 88px;
      height: 30px;
      cursor: pointer;
      border: none;
      background: url(/img/button.png) no-repeat 100%;
      // border: 1px solid !important;
      // border-image: linear-gradient(180deg, #0ec7ed 0%, #009dc0 100%) 1 1 !important;
      // box-shadow: 0px 1px 11px 0px #6ec1ff inset !important;
      margin-left: 30%;
      color: white;
    }
  }
}

.shapeDiv {
  width: 200px;
  margin: 20px auto;
  height: 96px;
  background: rgba(35, 134, 164, 0.3);
  border: 1px solid rgba(14, 199, 237, 0.5);
  border-radius: 4px;
  border-radius: 4px;
  // margin: 20px;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  line-height: 24px;
  padding-top: 14px;

  .shapeInput {
    width: 100%;
    position: relative;
    left: 0px;
    height: 100%;
    top: -80px;
    opacity: 0;
  }
}
.q-gutter-x-md,
.q-gutter-md {
  margin-left: 0;
}
::v-deep .fixed-bottom-left,
.absolute-bottom-left {
  margin: 40px 0 0 0;
}
</style>
